import React, { useEffect, useRef, useState } from 'react'
import style from './style.module.css'
import Navbar from '../../components/Navbar/Index'
import { LeftOutline } from 'antd-mobile-icons'
import { SearchBar, Swiper } from 'antd-mobile'
import { Tag, Space } from 'antd-mobile'
import detail_img from '../../img/detail.png'
import Paragraph from '../../components/Paragraph/Index'
import { CartO, ChatO, Star } from '@react-vant/icons'
import { ActionBar } from 'react-vant';
import axios from "axios"
//tab切换  参考月贷
import { Tabs } from 'react-vant'
import { BellOutline, RightOutline } from 'antd-mobile-icons'

import { useNavigate } from 'react-router-dom'
import { useLocation } from 'react-router-dom'
import { useDispatch, useSelector } from "react-redux"
import { pushList } from '../../store/reducer/aa'
//客户端详情周边地图展示
import { DrawingManager, BMapGL, Map } from 'react-bmapgl'


function DetailView({ }) {
    const banner_url = [
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Febd91857-4222-4a90-aeca-c0a5918c0e71%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1690720366&t=be4b41f17c451b468b0dbf6b0e8ac911',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F8c3ea534-6986-4ab0-a0a2-b9d945d2d943%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1690720366&t=3f3c0f91da8be19ee36fdcc5d2443d5b',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fab6601e6-3852-40e1-b781-69e55ba1c150%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1690720366&t=8ad9cfe83016a790dd6e7cdf51197130',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fde93d14c-ac1e-4d52-9915-a52d71de1e64%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1690720366&t=f960879a96f33a052ce6f6893073c29f'
    ]
    const dispatch = useDispatch()
    const container = useRef(null)
    const navigate = useNavigate()
    const [activeIndex, setActiveIndex] = useState(0)
    //收藏功能
    const location = useLocation()
    const data = location.state
    let [flag, setFlag] = useState(false)
    //参考月贷
    useEffect(() => {
        axios.get("/api/list").then(res => {
            console.log(res.data);
            if (res.status === 200) {
                console.log(res.data.list, '标记');
                dispatch(pushList(res.data.list))

            }
        })
    }, [])

    const list = useSelector(state => {
        console.log(state);
        return state.aa.allList
    })
    return (
        <div>
            <div className={style['go_back']} onClick={() => { navigate(-1) }}><LeftOutline style={{ color: '#fff', fontSize: '20px' }} /></div>
            <div className={style['banner']}>
                <Swiper
                    loop
                    indicator={(total, current) => (
                        <div className={style.customIndicator}>
                            {`${current + 1} / ${total}`}
                        </div>
                    )}
                >
                    {
                        banner_url.map((item, index) => {
                            return <Swiper.Item key={index}>
                                <div
                                    className={style['banner_content']}
                                >
                                    <img src={item} alt="" />
                                </div>
                            </Swiper.Item>
                        })
                    }
                </Swiper>
            </div>
            <div style={{ padding: '10px' }}>
                <h2 style={{ fontWeight: 'normal' }}>{data.title}<Tag color='#000' fill='outline' style={{ marginLeft: '15px' }}><div style={{
                    padding: '5px 15px',

                }} onClick={() => {
                    navigate('/index/vr')
                }}>VR</div></Tag></h2>
                <h3 style={{ color: '#EC808D', margin: '10px 0' }}>{data.price}万 {data.houseType} 101m</h3>
            </div>
            <div>
                <img src={detail_img} alt="" style={{ width: '100%' }} />
            </div>
            <div>
                <Paragraph
                    nav_left={<h2 style={{ lineHeight: '30px' }}>参考月贷</h2>}
                    nav_right={<div onClick={() => navigate('/index/mortgage_calculator')}>房贷计算器<RightOutline /></div>}
                    container={
                        <div className={style['banner_container']}>
                            <div style={{
                                width: '100%',
                                height: '100%',
                                overflow: 'hidden',
                                display: 'flex',
                                justifyContent: 'space-between',
                                flexDirection: 'column',
                            }}>
                                <div className={style['container_header']}>
                                    <div style={activeIndex == 0 ? {
                                        background: '#fff',
                                        color: '#000',
                                        borderRadius: '0 12px 0 0',
                                    } : {}} onClick={() => setActiveIndex(0)}>等额本息</div>
                                    <div
                                        style={activeIndex == 1 ? {
                                            background: '#fff',
                                            color: '#000',
                                            borderRadius: '12px 0 0 0',
                                        } : {}} onClick={() => setActiveIndex(1)}
                                    >等额本金</div>
                                </div>
                                <div className={style['container_main']}>
                                    <div className={style['container_main_up']}>
                                        <span>月供 ¥</span>5148.05<span>(30年)</span>
                                    </div>
                                    <div className={style['container_main_bom']}>
                                        <div>
                                            <p><span>总价</span></p>
                                            <p>138.00万</p>
                                        </div>
                                        <div>
                                            <p><span>首付</span></p>
                                            <p>41万<span>3成</span></p>
                                        </div>
                                        <div>
                                            <p><span>贷款</span></p>
                                            <p>97.00万</p>
                                        </div>
                                        <div>
                                            <p><span>利息</span></p>
                                            <p>88.33万</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    }
                ></Paragraph>
                <Paragraph
                    nav_left={<h2 style={{ lineHeight: '30px' }}>位置及周边<RightOutline /></h2>}
                    nav_right={<div onClick={() => {
                        navigate('/index/home/route_planning')
                    }}>路线规划</div>}
                    container={
                        <div className={style['banner_container1']}>
                            <div id="container">
                                {/* 客户端详情周边地图展示 */}
                                <Map
                                    center={new window.BMapGL.Point(116.404449, 39.914889)}
                                    zoom={12}
                                    tilt={40}
                                    enableScrollWheelZoom
                                >
                                    <DrawingManager
                                        enableLimit
                                        enableCalculate
                                        onOverlaycomplete={(e, info) => { console.log(e, info) }}
                                    />
                                </Map>
                            </div>
                        </div>
                    }
                ></Paragraph>
                <Paragraph
                    nav_left={<h2 style={{ lineHeight: '30px' }}>推荐房源</h2>}
                    container={
                        <div>
                            {
                                list && list.length > 0 ? list.slice(0, 5).map((item, index) => {
                                    return <div key={index} style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                                        <img src={item.img} alt="" style={{ display: 'flex', borderRadius: '10px', float: 'left', marginLeft: '10px', marginRight: '30px', width: '100px', height: '80px' }} />
                                        <div>
                                            <h3>{item.name}</h3>
                                            <p>{item.desc}</p>
                                            <p>{item.title}</p>
                                            <p style={{ color: '#FD7A1C' }}>{item.price}万</p>
                                            <button style={{ border: 'none', width: '50px', height: '18px' }}>{item.type}</button>
                                            <p>{item.averagePrice}/m²</p>
                                        </div>
                                    </div>
                                }) : '暂无数据'
                            }

                        </div>
                    }
                ></Paragraph>
            </div>
            <div style={{ height: '50px' }}></div>
            <div>
                <div>
                    <ActionBar>

                        <ActionBar.Icon onClick={() => setFlag(!flag)} icon={<Star color={flag ? 'red' : '#ccc'} />} text='收藏' />
                        <ActionBar.Button type='warning' text='在线咨询' onClick={() => navigate('/index/customer_server')} />
                        <ActionBar.Button type='danger' text='电话咨询' />
                    </ActionBar>
                </div>
            </div>
        </div>
    )
}

export default DetailView